<template>
<!-- 搜索框 -->
  <div class="home">
    <!-- 面试题:页面弹框后看见首页的内容,如何解决? -->
    <!-- 给首页内容套一个div v-show 通过路径的值来决定是否展示,为避免立刻消失,外加一个过渡效果 -->
    <transition name="van-fade">
    <div v-if="$route.path==='/home'">
      <van-search
      shape="round"
      background="#ccc"
      placeholder="请输入搜索关键词"
      disabled
      @click="serachClick"
    />
<!-- 轮播图 -->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#39a9ed">
  <van-swipe-item v-for="item in banner" :key="item.id">
    <img :src="item.image_url" alt="" width="100%">
  </van-swipe-item>
  </van-swipe>

<!-- 图标导航 -->
  <van-grid :column-num="5">
  <van-grid-item v-for="item in channel" :key="item.id" :icon="item.icon_url" :text="item.name" />
  </van-grid>

  <!-- 直供 -->
    <div class="info1 mar-t">
      <h3>品牌制造商直供</h3>
    <ul>
      <li v-for="item in brandList" :key="item.id" >
        <p>{{item.name}}</p>
        <p>{{item.floor_price | geshi}}</p>
        <a href="#">
          <img :src="item.pic_url" alt="">
        </a>
      </li>
    </ul>
    </div>
    
    
    <!-- <new-list :newGoodsList="newGoodsList"/> -->
    <div class="info2 mar-t">
    <h3>周一周四·新品首发</h3>
    
    <products :goodsList="newGoodsList"/>
  </div>

  <!-- 人气推荐 -->
    <div>
        <div class="info3 mar-t">
      <h3>人气推荐</h3>
    <ul>
      <li v-for="item in hotGoodsList" :key="item.id">
        <div>
          <a href="#">
          <img :src="item.list_pic_url" alt="">
        </a>
        </div>
        <div>
          <h4>{{item.name}}</h4>
          <p>{{item.goods_brief}}</p>
          <p>{{item.retail_price | geshi}}</p>
        </div>
      </li>
    </ul>
    
    </div>
    </div>

  <!-- 小轮播图 -->
  <zhuanti :topicList="topicList"/>
  
    <!-- 页面主体 -->
    <fenlei :categoryList="categoryList"/>
    </div>
    </transition>
    

  <!-- 弹出页面占位符 -->
  <!-- <transition name="slide"> -->
  <transition name="van-slide-right">
  <router-view></router-view>
  </transition>


  <!-- 黑色遮罩层 -->
    <transition name="van-fade">
    <div class="shadow" v-show="isShowShadow"></div>
    </transition>
  </div>

</template>

<script>


// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import {getHomeData} from "@/request/api"
import {mapState,mapMutations} from "vuex"
import fenlei from '@/components/homeinfo/fenlei.vue'
import zhuanti from '@/components/homeinfo/zhuanti'
import products from "@/components/products"

export default {
  name: 'Home',
  data(){
    return{
      // 轮播图
      banner:[],
      // 图标
      channel:[],
       
      // 新品首发
      newGoodsList:[],
      hotGoodsList:[],
      // 分类
      categoryList:[],
      // 专题
      topicList:[]
    }
  },
  computed:{
    ...mapState({
      isShowShadow:state=>state.showShadow.isShowShadow
    })
  },
  // created(){
  //   getHomeData()
  //   .then(res=>{  //这个res接收的是响应拦截器返回的值
  //     // console.log(res.data);
  //     // this.banner=res.data.banner
  //     let {banner,channel,brandList,newGoodsList,hotGoodsList,categoryList,topicList} = res.data
  //     this.banner=banner
  //     this.channel=channel
  //     this.brandList=brandList
  //     this.newGoodsList=newGoodsList
  //     this.hotGoodsList=hotGoodsList
  //     this.categoryList=categoryList
  //     this.topicList=topicList
  //   }).catch(err=>{
  //     console.log(err);
  //   })
  // },
  async created(){    //async+await处理异步函数嵌套
    let res= await getHomeData();
      let {banner,channel,brandList,newGoodsList,hotGoodsList,categoryList,topicList} = res.data
      this.banner=banner
      this.channel=channel
      this.brandList=brandList
      this.newGoodsList=newGoodsList
      this.hotGoodsList=hotGoodsList
      this.categoryList=categoryList
      this.topicList=topicList

      // 完成第一个请求后,才发起第二个请求
      // let res2=await xxx()
      // .....
  },
  methods:{
    ...mapMutations({
      chanShadow:"showShadow/chanShadow"
    }),
    serachClick(){
      this.$router.push('/home/searchpopup')
      // this.$router.push('/searchpopup')
      // 修改vuex中的值,本质是调用chanshadow方法
      this.chanShadow(true)
    }
  },
  // 这不是路由守卫,只是用来监听父子级关系的路由切换
  watch:{
    $route(to,from){
      if(to.path=="/home"){
        this.chanShadow(false)
      }
    }
  },
  components: {
    fenlei,
    products,
    zhuanti
  }
}
</script>
<style lang="less" >
.my-swipe .van-swipe-item {
    line-height: 0;
    
  }
  /* 过渡的初始和离开过渡的结束 */
    // .slide-enter,.slide-leave-to{
    //     right: -100%;
    // }
    // /* 过渡时间 */
    // .slide-enter-active,.slide-leave-active{
    //     transition: all .5s;
    // }
    // /* 过渡的结束和离开过渡的初始 */
    // .slide-enter-to,.slide-leave{
    //     right: 0;
    // }
    .shadow{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .5);
      z-index: 9;
    }
    // .van-tabbar{
    //   margin-top: 50px;
    // }
    
   #app h3{
    font-size: 20px;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
  .info1{
    li{
      position: relative;
      p{
        position: absolute;
        z-index: 1;
        &:nth-of-type(2){
          margin-top: 40px;
        }
      }
    }
  }
  // 公共样式
  ul{
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 16px;
    li{
      width: 49%;
      font-size: 14px;
      p{
        margin: 10px;
        text-align: center;
        &:nth-of-type(2){
          color: red;
        }
      }
      img{
        width: 100%;
      }
    }
  }

  .info3{
  li{
    width: 100%;
    display: flex;
    background-color: #fafafa;
    margin-top: 10px;
    div{
      &:nth-child(1){
        width: 100px;
      }
      &:nth-child(2){
        flex: 1;
        h4{
          margin: 15px 0 0 15px;
          font-size: 18px;
        }
        p{
          font-size: 12px;
          text-align: left;
          padding: 5px;
        }
      }
    }
  }
}

  
</style>
